$(function () {
  // console.log(666);

  // 1、ajax请求个人详细信息，渲染到页面
  $.ajax({
    method: "get",
    url: BigNew.user_detail,
    success: (res) => {
      // console.log(res);
      // const { username, nickname, email, userPic, password } = res.data;
      // console.log(username, nickname, email, userPic, password);
      // 方案1：
      /* $('[name="username"]').val(username);
      $('[name="nickname"]').val(nickname);
      $('[name="email"]').val(email);
      $('[name="password"]').val(password); */

      // 方案2：
      for (let key in res.data) {
        if (key !== "userPic") {
          $(`[name="${key}"]`).val(res.data[key]);
        }
      }

      // 图片路径修改
      $(".user_pic").prop({ src: res.data.userPic });
    },
  });

  // 2、点击头像，触发上传按钮，文件预览功能
  $(".user_pic").click(() => {
    // 触发上传按钮的点击事件
    $("#exampleInputFile").click();
  });
  // 上传按钮绑定change事件，当值发生改变时触发
  $("#exampleInputFile").change(() => {
    // console.dir($("#exampleInputFile").get(0).files[0]);
    // 获取上传图片路径的对象
    const fileObj = $("#exampleInputFile").get(0).files[0];
    // 创建一个url 将图片路径对象改成浏览器可识别路径
    const url = URL.createObjectURL(fileObj);
    console.log(url);
    // 修改图片路径，改成 url 获取的路径
    $(".user_pic").prop("src", url);
  });

  // 3、编辑个人信息
  $('[type="submit"]').click((e) => {
    // 阻止表单默认提交
    e.preventDefault();

    // 定义FormData() 传一个原生from表单可以快速获取表单所有值
    const form = document.getElementById("form");
    const fd = new FormData(form);
    fd.forEach((value, key) => {
      console.log(key, value);
    });

    // ajax请求 编辑个人信息
    $.ajax({
      method: "POST",
      url: BigNew.user_edit,
      data: fd,
      // fd不需要jq处理数据, cp 组合
      contentType: false,
      processData: false,
      success: (res) => {
        // console.log(res);
        if (res.code == 200) {
          alert("更新用户信息成功");
          // 让父页面刷新，需要用 live Server 打开
          window.parent.location.reload();
        }
      },
    });
  });
});
